Avatar

x-avatar

A user avatar showing a photo, auto-generated initials from a name, or a fallback icon. Five sizes, square or circle, an optional status dot, and deterministic colors.

php artisan components:add avatar

Playground

src name initials size circle color status

Examples

Sizes, photos & status

Photo, initials, or icon fallback — five sizes, circle or square, with an optional status dot.

<div class="flex flex-wrap items-center justify-center gap-4">
    <x-components.avatar size="xs" name="Tony Lea" circle />
    <x-components.avatar size="sm" name="Ada Lovelace" color="auto" circle />
    <x-components.avatar size="md" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&h=120&fit=crop&crop=faces" circle status="online" />
    <x-components.avatar size="lg" name="Grace Hopper" color="auto" />
    <x-components.avatar size="xl" circle status="busy" />
</div>

Colors

Deterministic soft colors, or auto to derive one from the name.

<div class="flex flex-wrap items-center justify-center gap-3">
    <x-components.avatar name="Blue" color="blue" circle />
    <x-components.avatar name="Green" color="green" circle />
    <x-components.avatar name="Amber" color="amber" circle />
    <x-components.avatar name="Rose" color="rose" circle />
    <x-components.avatar name="Violet" color="violet" circle />
</div>

Props

Prop	Type	Default	Description
`src`	text	`—`	Image URL. Falls back to initials, then an icon.
`name`	text	`—`	Full name used to derive initials and the auto color.
`initials`	text	`—`	Explicit initials, overriding those derived from name.
`size`	select xs · sm · md · lg · xl	`md`	The avatar size.
`circle`	boolean	`false`	Render a full circle instead of a rounded square.
`color`	text	`—`	A soft color (blue, green, amber, rose, violet, cyan, orange, teal, pink, indigo) or 'auto' to derive one from the name.
`status`	select online · away · busy · offline	`—`	Optional presence dot in the corner.

Slots

Slot	Description
`slot`	Custom fallback content, shown when there's no src, initials or name.